<template>
  <view class="start">
        <view class="start-select">
            <view class="man-select"  @click="show=true" :style="{ 'background-image': 'url(' + env + manBg + ')' }">
                <image
                    :src="env + manLogo[data[0]]"
                    mode="widthFix"
                ></image>
                <view>男生</view>
            </view>

            <view class="man-select"  @click="show=true" :style="{ 'background-image': 'url(' + env + womanBg + ')' }">
                <image
                    :src="env + woManLogo[data[1]]"
                    mode="widthFix"
                ></image>
                <view class="woman-name">女生</view>
            </view>
        </view>

        <view @click="showModel=true" class="showgg" :style="{ 'background-image': 'url(' + env + 'but.png' + ')' }">立即配对</view>

        <fui-bottom-popup :show="show" @close="closePopup">
            <view class="fui-custom__wrap">
                <view class="animals">
                    <view class="age" style="color: rgb(107,151,239);left: 20rpx;" >男生</view>
                    <picker-view :indicator-style="indicatorStyle"  @change="bindChange" class="picker-view">
                    <picker-view-column>
                        <view class="item" v-for="(item,index) in manLogo" :key="index">
                            <image
                                    :src="env + item"
                                    style="width: 60rpx;"
                                    mode="widthFix"
                                ></image>
                        </view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="item" v-for="(item,index) in woManLogo" :key="index">
                            <image
                                    :src="env + item"
                                    style="width: 60rpx;"
                                    mode="widthFix"
                                ></image>
                        </view>
                    </picker-view-column>
                </picker-view>
                <view class="age" style="color: rgb(253,128,227);right: 20rpx;">女生</view>
                </view>
                <view @click="commit" class="commit">确认</view>
            </view>
        </fui-bottom-popup>
        <LandscapeModel v-model:show="showModel" :sonFun="sonFun"/>
  </view>
</template>

<script setup lang="ts">
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import { EnumStatus } from "@/utils/constants";
import { sxpeidui } from "@/utils/ab";

const emit = defineEmits(['update:defStatus','update:content'])
const showModel = ref(false)
const manBg = ref('man-bg.jpg')
const womanBg = ref('woman-bg.jpg')
const env = ref('https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/sas/animals/')
const manLogo = ref([
    '_x30_1.png','_x30_2.png','_x30_3.png','_x30_4.png','_x30_5.png','_x30_6.png','_x30_7.png','_x30_8.png','_x30_9.png','_x31_0.png','_x31_1.png','_x31_2.png'
])
const woManLogo = ref([
    'su.png','niu.png','hu.png','tu.png','long.png','she.png','ma.png','yang.png','hou.png','ji.png','gou.png','zhu.png'
])
const show = ref(false)
const indicatorStyle = ref(`height: 120rpx;`)
const data = ref([0,0])
const detailData =  ref([0,0])
const closePopup = ()=>{
    show.value = false
}
const bindChange = (e:any)=>{
    detailData.value = e.detail.value
}

const commit = ()=>{
    data.value = detailData.value
    closePopup()
}
const sonFun = async ()=>{
    uni.hideLoading();
    const dataInfo  = await sxpeidui(data.value)
    emit('update:content',dataInfo)
    emit('update:defStatus',EnumStatus.RESULT)
}
</script>

<style lang="scss" scoped>
.start{
    .start-select{
        display: flex;
        justify-content: space-between;
        margin: 0 10%;
        position: absolute;
        top: 38%;
        width: 80%;
        .man-select{
            width: 270rpx;
            height: 300rpx;
            background-size: 100% 100%;
            text-align: center;
            image{
                width: 120rpx;
                height: 120rpx;
                margin-top: 70rpx;
            }
            view{
                font-size: 28rpx;
                margin-top: 47rpx;
                font-weight: bolder;
            }
            .woman-name{
                margin-top: 70rpx;
              
            }
        }
    }
    .showgg{
        color: white;
        padding: 25rpx 0;
        width: 50%;
        background-size: 100% 100%;
        text-align: center;
        background-repeat: no-repeat;
        border-radius: 48rpx;
        position: absolute;
        top: 80%;
        left: 25%;
    }

    .fui-custom__wrap{
        height: 700rpx;
        .animals{
           height: 500rpx;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 28rpx;
           .age{
                position: relative;
           }
            .picker-view{
                height: 100%;
                width: 80%;
            }
          
            .item{
                margin:0 auto;
                border-radius: 50%;
                width: 120rpx;
                height: 120rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgb(240,244,255);
            }
            
        }
        .commit{
            background: linear-gradient(to bottom, rgb(255,157,177), rgb(239,131,224));
            width: 60%;
            margin: auto;
            padding:18rpx 0;
            color: white;
            text-align: center;
            position: relative;
            border-radius: 38rpx;
            top: 10%;
        }
    }
}

</style>
